<template>
  <!--  搜索表单 -->
  <div style="margin-left: 20px; margin-top: 20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="分类">
        <el-cascader placeholder="请选择分类"
                     v-model="searchObj.categoryId" :props="props"/>
      </el-form-item>
      <el-form-item label="规格名称">
        <el-input v-model="searchObj.specName" placeholder="请输入规格名称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="initData">搜索</el-button>
        <el-button :icon="Refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 按钮组 -->
  <div style="margin-left: 20px;margin-top: 10px">
    <el-button size="small" type="primary" plain :icon="Plus" @click="handleShowDialog">新增</el-button>
    <!--    <el-button size="small" type="success" plain :icon="Edit" >修改</el-button>-->
    <el-button size="small" type="danger" plain :icon="Delete" @click="handleBatchDel">批量删除</el-button>
  </div>
  <!--  数据表格 -->
  <!--     [{"key":"颜色","valueList":["白色","红色","黑色"]},{"key":"内存","valueList":["8G","18G"]}]
  后端返回的是json字符串  前端需要转为json数组才可以遍历对象
  -->
  <div style="margin-left: 20px;margin-top: 10px">
    <el-table
        style="width: 100%"
        :data="specs"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column label="分类名称" property="categoryName" width="180"/>
      <el-table-column label="商品规格名称" property="specName" width="180"/>

      <el-table-column label="商品规格值" property="specValue" >
        <template #default="scope">
          <div v-for="item in scope.row.specValue">
            {{item.key}}: <el-tag style="background-color: #000000" v-for="val in item.valueList" v-text="val"></el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" property="createTime"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleShowEditDialog(scope.row)">
            修改
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 使用若依的自己封装的分页导航组件-->
    <pagination
        v-show="searchObj.total > 0"
        :total="searchObj.total"
        v-model:page="searchObj.pageNum"
        v-model:limit="searchObj.pageSize"
        @pagination="initData"
    />

  </div>

  <!-- 新增/更新商品规格的对话框 -->
  <div>
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
      <el-form>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-cascader placeholder="请选择分类"
                       v-model="spec.categoryId" :props="props"/>
        </el-form-item>
        <el-form-item label="商品规格名称" :label-width="formLabelWidth">
          <el-input v-model="spec.specName" placeholder="请输入商品规格名称" autocomplete="off"/>
          <!--          遍历展示已经缓存的规格值列表 -->
          <div v-if="specValueList && specValueList.length>0" v-for="(item,index) in specValueList"
               style="padding: 5px; margin: 0;width: 100%;">
            {{item.key}}: <el-tag style="background-color: #000000" v-for="val in item.valueList" v-text="val"></el-tag>
            <el-button type="danger" @click="specValueList.splice(index ,1)" text>删除</el-button>
          </div>
          <!--          展示添加表单的按钮 -->
          <div v-if="!addValue">
            <el-button  style="margin-top: 10px" size="small"
                        @click="addValue = {}"  >添加新规格</el-button>
          </div>
          <!--          添加表单 -->
          <div v-else style="margin-top: 10px">
            <!--   栅格系统：elementplus将一行划分为24格           -->
            <el-row >
              <el-col :span="9">
                <el-input v-model="addValue.key" placeholder="请输入规格" width="300" autocomplete="off"/>
              </el-col>
              <el-col :span="9">
                <el-input v-model="addValue.valueList" placeholder="请输入规格值,例如：白色,黑色..." width="300" autocomplete="off"/>
              </el-col>
              <el-col :span="5">
                <el-button  style="margin-left: 5px" size="small" @click="handleCacheAddValue">添加</el-button>
              </el-col>
            </el-row>
          </div>

        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSaveOrUpdate">确定</el-button>
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  Search,
  Refresh,
  Plus,
  Edit,
  Delete
} from '@element-plus/icons-vue'
import {listSpecs, delSpecs, addSpec,getSpec , updateSpec} from '@/api/product/spec.js'
import {onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
//管理登录状态token的工具类
import { getToken } from '@/utils/auth'
import {listByPid} from "@/api/product/category.js";

//!!!!!!!!!! 新增修改 商品规格对话框：  规格值表单处理
//1、新增搜集规格和值的集合
const specValueList = ref([])
const addValue = ref(null)
// 添加 新规格 的 按钮的事件函数： 点击时将新规格缓存
const handleCacheAddValue = ()=>{
  //addValue的valueList需要特殊处理： 使用逗号 将字符串解析为数组
  addValue.value.valueList = addValue.value.valueList.split(",")
  //将新添加的规格值  缓存到集合中
  specValueList.value.push(addValue.value)
  //置空
  addValue.value = null
}

//2、搜索表单的 分类级联选择器
const props = { //级联选择器配置
  lazy: true, //启用懒加载：
  label: 'name', //配置 使用加载到数据的哪个属性当作标题展示
  value:'id' , //配置 使用选择的分类的哪个属性值 作为 选中后数据绑定的值
  leaf: 'leaf', // 配置 使用加载到的数据的哪个属性值判断 当前节点是不是叶子节点
  lazyLoad: async (node, resolve) => {//懒加载函数
    //页面渲染时 会执行一次： 我们可以加载一级分类列表
    let pid = 0
    if (node.data.id) {
      //判断传入的node对象如果 dataId为空 表示第一次加载级联数据， 如果不为空 使用加载到的dataId当作父id查询下一级分类
      pid = node.data.id
    }
    //加载下一级数据
    const {data} = await listByPid(pid)
    //遍历data：给每个元素 设置它是否位叶子节点
    data.forEach(cate => {
      cate.leaf = !cate.hasChildren
    })
    //解析数据到node的下一级展示
    resolve(data)
  },
}



//数据表格：修改按钮事件函数 先查询数据回显 再弹出更新对话框
const handleShowEditDialog = async (row)=>{
  //1、根据row的id查询数据回显
  const  {data} = await getSpec(row.id)
  spec.value = data

  dialogTitle.value = '更新商品规格'
  //将查询到的 规格值json字符串转为 json数组 回显
  specValueList.value = JSON.parse(spec.value.specValue)
  spec.value.categoryId = []
  spec.value.categoryId[0] = spec.value.categoryIds[0]+''
  spec.value.categoryId[1] = spec.value.categoryIds[1]+''
  spec.value.categoryId[2] = spec.value.categoryIds[2]+''
  //2、弹出对话框
  dialogFormVisible.value = true
}


//按钮组：新增按钮事件函数 弹出新增对话框
const handleShowDialog = ()=>{
  //清空缓存后 弹出对话框
  spec.value = {}
  dialogTitle.value = '新增商品规格'
  dialogFormVisible.value = true
}

//新增 更新对话框的属性和函数：
const dialogFormVisible = ref(false) //默认隐藏对话框
const dialogTitle = ref('新增商品规格')
const formLabelWidth = '120px'
const spec = ref({})

//新增更新对话框提交按钮的事件函数： 要区分新增和更新业务
const handleSaveOrUpdate = ()=>{
  //处理新增/更新对话框收集到的 规格数据
  if(!spec.value.categoryId || spec.value.categoryId.length !=3 ){
    ElMessage.warning("请选择分类")
    return
  }
  if(!specValueList.value || specValueList.value.length === 0 ){
    ElMessage.warning("请输入规格属性值")
    return
  }
  spec.value.categoryId = spec.value.categoryId[2] //规格值需要和三级分类id绑定
  //将收集到的规格属性值 转为json字符串
  spec.value.specValue = JSON.stringify(specValueList.value)

  if(spec.value.id){
    //更新
    handleUpdate()
  }else{
    //新增
    handleSave()
  }
}
// 新增商品规格
const handleSave = async ()=>{
  //提交新增请求
  await addSpec(spec.value)
  //刷新页面数据
  initData()
  //清空缓存
  spec.value = {}
  specValueList.value = []
  //关闭对话框
  dialogFormVisible.value = false
}
// 更新商品规格
const handleUpdate = async ()=>{
  await updateSpec(spec.value)
  //刷新页面数据
  initData()
  //清空缓存
  spec.value = {}
  specValueList.value = []
  //关闭对话框
  dialogFormVisible.value = false
}


//============-------------------------新增对话框结束





//定义一个搜索对象 接收搜索条件
const searchObj = ref({
  name: null,
  pageNum: 1,
  pageSize: 3,
  total: 0
})
const specs = ref([])
const selection = ref([])
//批量删除按钮事件函数：
const handleBatchDel = () => {
  //数据校验：如果未选中行 不提交删除请求
  if (!selection.value || selection.value.length === 0) {
    ElMessage.warning('请选中要删除的行')
    return
  }

  ElMessageBox.confirm(
      `正在删除商品规格 ${selection.value.map((obj) => {
        return obj.name
      }).join("、")} ，是否继续?`,
      '删除提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        //1、获取被选中的要删除的商品规格id列表  拼接字符串
        // selection.value.forEach(row => {
        //   // console.log(row.id+" , "+ row.name)
        // })
        let ids = selection.value.map((obj) => {
          return obj.id
        }).join(",");
        // console.log(ids)
        //2、提交批量删除的请求
        await delSpecs(ids)
        //3、刷新页面数据
        ElMessage.success(`删除  ${selection.value.map((obj) => {
          return obj.name
        }).join("、")} 成功`)
        initData()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })


}
//表格的 行选中状态发生改变时的回调
const handleSelectionChange = (newSelection) => {  //传入的参数是表格中选中的行 json对象
  // console.log('11111')
  // console.log(newSelection)
  selection.value = newSelection //每次选中行改变时  接收目前被选中的所有行数据
}


//页面初始化，加载分页数据展示
onMounted(() => {
  //vue的钩子函数 页面渲染前执行
  //调用加载数据的函数
  initData()
})
//加载页面数据的函数
const initData = async () => {
  if(searchObj.value.categoryId && searchObj.value.categoryId.length === 3){
    searchObj.value.categoryId = searchObj.value.categoryId[2]
  }
  const {total, rows} = await listSpecs(searchObj.value)
   searchObj.value.total = +total
  //将加载到的规格属性值 的规格值 json数组字符串 转为json数组
  rows.forEach(spec=> {
    //json字符串转对象/数组
    spec.specValue = JSON.parse(spec.specValue)
  })
  specs.value = rows
}
//重置按钮事件函数： 清空查询条件 加载默认页面数据
const handleReset = () => {
  searchObj.value = {
    name: null,
    pageNum: 1,
    pageSize: 3,
    total: 0
  }
  initData()
}
//数据表格 删除按钮事件函数
const handleDelete = async (row) => {
  await delSpecs(row.id)
  ElMessage.success('删除成功')
  initData()
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>